import React,{Component} from "react";
import style from "./index.module.scss";
import {connect} from "react-redux";
import {message_icon,certificate_icon,setting_icon,place_icon,lock_icon,customer_icon,rule_icon} from '../../common/icon/svg'
const img2 = require('../../common/image/home/组 2.png')
const userHeadDefault = require('../../common/imageDefault/user-head-default.png').default;

import {Image} from "antd";

class Me extends Component {
    constructor(props){
        super(props);
        this.props = props;
        this.state={
            userInfo:{
                uid:"",
                head_url:null,
                nickname:"天河朱丽叶",
                phonenum:"178-6666-8888",
                email:"123456@qq.com",
                signature:"认识你们,很开心~",
                stuAuth:true,
            },
            list:[
                {
                    name:"我的在售",
                    path:"/onsale",
                    img:require("../../common/image/me/me-onsell.png"),
                    orderList:[]
                },
                {
                    name:"我的已售",
                    path:"/soldout",
                    img:require("../../common/image/me/me-sellled.png"),
                    orderList:[],
                },
                {
                    name:"我的买入",
                    path:"/mebuy",
                    img:require("../../common/image/me/me-sellin.png"),
                    orderList:[],
                },
                {
                    name:"我的收藏",
                    path:"/want",
                    img:require("../../common/image/me/me-want.png"),
                    orderList:[]
                }
            ],
            footerList:[
                {
                    name:"个人信息",
                    icon:setting_icon,
                    path:"/user"
                },
                {
                    name:"收货地址",
                    icon:place_icon,
                    path:"/address"
                },
                {
                    name:"账户安全",
                    icon:lock_icon,
                    path:"/privateInfo",
                },
                {
                    name:"客服中心",
                    icon:customer_icon,
                    path:"/customerCenter"
                },
                {
                    name:"平台规则",
                    icon:rule_icon,
                    path:"/platformRules"
                }
            ]
        }
    }
    componentDidMount(){
        let temp = localStorage.getItem('userList');
        if(temp){
            this.setState({userInfo:JSON.parse(temp)})
        }
    }
    //点击进入订单页
    btn=(item)=>{
        if(item.path){
            this.props.history.push(item.path)
        }
    }
    // 点击进行修该地址或个人信息
    amend=(item)=>{
        if(item.path){
            console.log(item);
            this.props.history.push({pathname:item.path,state:{userInfo:this.state.userInfo}})
        }
    }
    render(){
        let {userInfo,list,footerList} =this.state
        return (
            <div className={style["me-root"]}>
                <div className={style.head}>
                    <span className={style.wo}>我</span>
                    <span className={style.msg} onClick={()=>this.props.history.push("/information")}>{message_icon}</span>
                </div>
                <div className={style.user}>
                    <div className={style["user-img"]}>
                        <Image className={style["user-head"]} src={`/apis/${userInfo["head_url"]}`} fallback={userHeadDefault} />
                    </div>
                    {userInfo.uid 
                        ? <div className={style["user-msg"]}>
                            <div className={style.msg}>
                                <p className={style.nickname}>{userInfo.nickname}</p>
                                <div className={style["user-stu"]} style={{display:userInfo.stuAuth?"flex":"none"}}>
                                    <span className={style.icon}>{certificate_icon}</span>
                                    <span className={style.stu}>学生认证</span>
                                </div>
                            </div>
                            <p className={style.id}>用户ID | {userInfo.phonenum}</p>
                        </div>
                        :<div>
                            <button className={style["login-btn"]} onClick={()=>{this.props.history.push("/login")}}>点击登录</button>
                        </div>
                    }
                </div>
                <div className={style.content}>
                <div className={style.tu}>
                    <img src={img2.default}></img>
                </div>
                <div className={style["order-title"]}>
                    <h2 className={style.title}>我的订单</h2>
                    <ul className={style.order}>
                    {
                        list.map((item,i)=>{
                            return (
                                <li key={i} onClick={()=>this.btn(item)}>
                                    <img src={item.img.default} alt="错误"></img>
                                    <p>{item.name}</p>
                                </li>
                            )
                        })
                    }
                </ul>
                </div>
                <div className={style["order-titles"]}>
                    <h2 className={style.title}>我的服务</h2>
                    <ul className={style.order}>
                    {
                        footerList.slice(0,3).map((item,i)=>{
                            return (
                                <li key={i} onClick={()=>this.amend(item)}>
                                    <span>{item.icon}</span>
                                    <p>{item.name}</p>
                                </li>
                            )
                        })
                    }
                </ul>
                </div>
                <div className={style["order-titles"]}>
                    <h2 className={style.title}>其他服务</h2>
                    <ul className={style.order}>
                    { footerList.slice(3).map((item,i)=>{
                            return (
                                <li key={i} onClick={()=>this.amend(item)}>
                                    <span>{item.icon}</span>
                                    <p>{item.name}</p>
                                </li>
                            )
                        })
                    }
                </ul>
                </div>
                </div>
                
                {/* <ul className={style.footer}>
                    {
                        footerList.map((item,i)=>{
                            return (
                                <li key={i} onClick={()=>this.amend(item)}>
                                    <span className={style["footer-name"]}>{item.name}</span>
                                    <span>{item.icon}</span>
                                </li>
                            )
                        })
                    }
                </ul> */}
            </div>
        )
    }
}

const mapStateToProps = (state)=>{
    return {userInfo:state.userInfo};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        updataUser:(user)=>{
            dispatch({type:"UPDATEUSER", data:user});
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Me);